<template>
<div>
    <loading v-if="loading"></loading>
    <!-- 主界面布局 -->
    <div class="common-layout">
        <el-container>
            <el-header>Header</el-header>
            <el-container>

                <el-aside width="300px">
                    <div class="mainContain">
                        <el-tree
                            :data="atree"
                            :props="defaultProps"
                            node-key="id"
                            @node-click = "nodeClink"
                            @node-contextmenu = "rightmenu"
                            default-expand-all
                            :expand-on-click-node="false">
                                <template #default="{node,data }">
                                    <span class="custom-tree-node">
                                        <span>
                                            <el-icon v-if="data.children.length===0"><Document /></el-icon>
                                            <el-icon v-if="data.children.length>0"><Folder /></el-icon>
                                            {{ data.node.name }}
                                        </span>
                                      <span>
                                          <el-button @click="addEvent(node, data)" circle> <el-icon><FolderAdd /></el-icon> </el-button>
                                          <el-button @click="removeEvent(node, data)" circle> <el-icon><FolderRemove /></el-icon> </el-button>
                                      </span>
                                    </span>
                                </template>
                        </el-tree>
                    </div>
                </el-aside>


                <el-main>
                    <div>
                        <span>{{entry.script}}  </span>
                        <el-divider />
                        <span>脚本id：{{entry.id}}  </span>
                        <span>GroupId：{{entry.groupId}}  </span>
                        <el-divider />
                        <span>脚本名称：{{entry.name}}  </span>
                        <span>请求路径：{{entry.path}}  </span>
                        <span>请求方式：{{entry.method}}  </span>
                    </div>
                </el-main>
            </el-container>
        </el-container>
    </div>

    <div>
        <el-dialog v-model="dialogGroupForm" title="新增一个组">
            <el-form :model="newgroup">
                <el-form-item label="分组名称：" label-width="100px">
                    <el-input v-model="newgroup.name" autocomplete="off" />
                </el-form-item>
                <el-form-item label="分组路径：" label-width="100px">
                    <el-input v-model="newgroup.path" autocomplete="off" />
                </el-form-item>
            </el-form>
            <template #footer>
              <span class="dialog-footer">
                <el-button @click="dialogGroupForm = false">取消</el-button>
                <el-button type="primary" @click="submitNewGroup">提交</el-button>
              </span>
            </template>
        </el-dialog>
    </div>
    <div>
        <el-dialog v-model="dialogEntityForm" title="新增一个接口" width="800px">
            <el-form :model="newentity">
                <el-form-item label="请求方式：" label-width="100px">
                    <el-input v-model="newentity.method" autocomplete="off" />
                </el-form-item>
                <el-form-item label="接口名称：" label-width="100px">
                    <el-input v-model="newentity.name" autocomplete="off" />
                </el-form-item>
                <el-form-item label="请求地址：" label-width="100px">
                    <el-input style="width: 400px" v-model="newentity.path" autocomplete="off" />
                </el-form-item>

                <el-form-item>
                    <div>
                        <el-select v-model="table_name" placeholder="Select" @change="tableCharge" style="width: 300px">
                            <el-option
                                    v-for="item in tableList"
                                    :key="item"
                                    :label="item"
                                    :value="item"/>
                        </el-select>
                    </div>
                    <div>
                        <el-table
                                ref="multipleTableRef"
                                :data="tabledecribe"
                                style="width: 100%"
                                @selection-change="handleSelectionChange">
                            <el-table-column label="设为请求参数" width="120">
                                <template #default="scope">
                                    <div style="display: flex; align-items: center">
                                        <el-checkbox v-model="scope.row.isRequestParam" size="large" />
                                    </div>
                                </template>
                            </el-table-column>
                            <el-table-column label="设为返回参数" width="120">
                                <template #default="scope">
                                    <el-checkbox v-model="scope.row.isReturnParam" size="large" />
                                </template>
                            </el-table-column>
                            <el-table-column property="name" label="字段名" width="120"/>
                            <el-table-column property="type" label="字段类型" width="120" />
                            <el-table-column property="describe" label="字段描述" show-overflow-tooltip />
                            <el-table-column label="测试" width="120">
                                <template #default="scope">
                                    <el-button size="small" @click="handleEdit(scope.$index, scope.row, scope.column)">Edit</el-button>
                                </template>
                            </el-table-column>
                        </el-table>
                    </div>
                </el-form-item>

                <el-form-item>
                    <div class="paramcontain">
                        <!--新增按钮栏-->
<!--                        <div class="sidebutton">-->
<!--                            <span style="margin-bottom: 8px">-->
<!--                                <el-button @click="addParament" style="border-radius: 8px"> <el-icon><CirclePlus /></el-icon> </el-button>-->
<!--                            </span>-->
<!--                            <span><el-button @click="removeParament" style="border-radius: 8px"> <el-icon><Remove /></el-icon> </el-button></span>-->
<!--                        </div>-->
                        <!--参数栏-->
<!--                        <div class="paramcs">-->
<!--                            <el-row class="toprow" :gutter="20" style="margin-bottom: 8px">-->
<!--                                <el-col :span="6"> Key </el-col>-->
<!--                                <el-col :span="6">Value</el-col>-->
<!--                                <el-col :span="6">描述</el-col>-->
<!--                                <el-col :span="6">类型</el-col>-->
<!--                            </el-row>-->
<!--                            <el-row :gutter="20" v-for="(para,index) in paramts" :key="index" style="margin-bottom: 8px">-->
<!--                                <el-col :span="6"> <el-input v-model="para.name" :placeholder="para.name" /></el-col>-->
<!--                                <el-col :span="6"><el-input v-model="para.value" :placeholder="para.value" /></el-col>-->
<!--                                <el-col :span="6"><el-input v-model="para.describe" :placeholder="para.describe" /></el-col>-->
<!--                                <el-col :span="6"><el-input v-model="para.type" :placeholder="para.type" /></el-col>-->
<!--                            </el-row>-->
<!--                        </div>-->
                    </div>
                </el-form-item>
            </el-form>

            <template #footer>
              <span class="dialog-footer">
                <el-button @click="dialogEntityForm = false">取消</el-button>
                <el-button type="primary" @click="submitNewEntity">提交</el-button>
              </span>
            </template>
        </el-dialog>
    </div>
</div>
</template>

<script>
    import {getRequest,postRequest,postMulRequest} from "../utils/api";
    import { Document,Search,FolderAdd,FolderRemove,Folder,CirclePlus,Remove} from '@element-plus/icons-vue';
    export default {
        name: "Main",
        data(){
            return{
                dialogGroupForm: false,
                dialogEntityForm: false,
                loading: false,
                entry:{},
                groups: {},
                gtree:[],
                atree:[],
                defaultProps:{
                    children: 'children',
                    label: 'name'
                },
                newgroup:{
                    id : null,
                    name : "",
                    type : "api",
                    parentId : "0",
                    path : "",
                    createTime : null,
                    updateTime : null,
                    createBy : null,
                    updateBy : null,
                    paths : [],
                    options : [],
                    properties : {},
                },
                newentity:{
                    properties: {},
                    id: null,
                    script: "return hello world",
                    groupId: null,
                    name: "",
                    createTime: null,
                    updateTime: null,
                    lock: null,
                    createBy: null,
                    updateBy: null,
                    path: "",
                    method: "",
                    parameters: [],
                    options: [],
                    requestBody: null,
                    headers: [],
                    paths: [],
                    responseBody: null,
                    description: null,
                    requestBodyDefinition: null,
                    responseBodyDefinition: null
                },
                paramts:[],
                paramt:{
                    name:"",
                    value:"",
                    description: "",
                    required: false,
                    dataType: null,
                    type: null,
                    defaultValue: "",
                    validateType: null,
                    error:"",
                    expression:"",
                    children: null
                },
                divNums:0,
                tableList:[],
                table_name:"",
                tabledecribe:[],
            }
        },
        mounted() {
            this.initGroupInfo();
        },
        methods:{
            handleEdit(index,row,column){
                // row 才是我想要的
                console.log(index)
                console.log(row)
                console.log(column)
                console.log(this.requestPara)
            },
            tableCharge(val){
                console.log(val)
                getRequest("/describes/"+val).then(resp=>{
                    if (resp){
                        this.tabledecribe = resp.data;
                    }
                })
            },
            addParament(){
               this.paramts.push({});
            },
            removeParament(){
                this.paramts.pop();
            },
            processRequestParam(list){
                let tmp_list = {};
                tmp_list.name=list.name;
                tmp_list.description=list.description;
                tmp_list.dataType=list.dataType;
                this.paramts.push(tmp_list);
            },
            submitNewEntity(){
                let rparam = [];
                let oparam = [];
                this.paramts = [];
                for(let i=0; i<this.tabledecribe.length; i++){
                    if(this.tabledecribe[i].isRequestParam) {
                        this.processRequestParam(this.tabledecribe[i]);
                        let tmplist = [this.tabledecribe[i].name,this.tabledecribe[i].dataType]
                        rparam.push(tmplist);
                    }
                    if(this.tabledecribe[i].isReturnParam)
                        oparam.push(this.tabledecribe[i].name);
                }
                console.log(rparam);
                console.log(oparam);
                this.newentity.parameters = this.paramts;
                console.log(this.paramts);
                postMulRequest("/resource/file/api/saves",this.newentity,rparam,oparam,this.table_name).then(resp=>{
                    if (resp) {
                        this.initGroupInfo();
                        this.dialogEntityForm = false;
                        this.newentity.groupId = "";
                        this.paramts = [];
                    }
                });
            },
            submitNewGroup(){
                console.log(JSON.stringify(this.newgroup));
                postRequest("/resource/folder/mysave",this.newgroup).then(resp=>{
                    if (resp) {
                        this.dialogGroupForm = false;
                        this.initGroupInfo();
                    }
                })
                this.newgroup.parentId = "";
            },
            rightmenu(event,node,data,obj){
                alert("右击，id="+node.node.id)
                console.log(node)
            },
            nodeClink(node, data, obj){
                let id = node.node.id;
                getRequest("/myresource/isgroup/"+id).then(resp=>{
                    if (resp) {
                        if (resp.data === true) {
                            console.log("是组")
                            this.entry = {}
                        }
                        else{
                            getRequest("/resource/getfile/"+id).then(resp=>{
                                if (resp){
                                    this.entry = resp.data;
                                }
                            })
                        }
                    }
                })
            },
            addEvent(data, node){
                console.log("data=="+node.node.id);
                let id = node.node.id;
                getRequest("/myresource/isgroup/"+id).then(resp=>{
                    if (resp) {
                        if (resp.data === true) {
                            console.log("新建组")
                            this.dialogGroupForm = true;
                            this.entry = {}
                            //拿到一个parentId，其实就是当前这个 groupid
                            this.newgroup.parentId = id;
                        }
                        else{
                            console.log("新建文件");
                            this.dialogEntityForm = true;
                            //拿到groupid，这里直接设置进去
                            this.newentity.groupId = node.node.groupId;
                        }
                    }
                })
            },
            removeEvent(node, data){

            },
            initGroupInfo(){
                getRequest("/resource").then(resp=>{
                    if (resp) {
                        //console.log("最开始是"+JSON.stringify(tmp["1"].node));
                        let tmp = JSON.parse(JSON.stringify(resp.data));
                        this.groups = tmp;
                        this.atree = [tmp.api]
                    }
                });
                getRequest("/tablelist").then(resp=>{
                    if (resp){
                        this.tableList = resp.data;
                    }
                })
            },
        },
        components:{
           Document,Search,FolderAdd,FolderRemove,Folder,CirclePlus,Remove
        }
    }
</script>

<style scoped>
    .common-layout{

    }
    .el-header {
        background-color: #B3C0D1;
        color: #666;
        line-height: 60px;
    }
    .el-aside {
        color: #666;
    }

    .custom-tree-node {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 16px;
        padding-right: 6px;
    }
    .custom-tree-node span{
        margin:0;
        padding:0;
    }
    .custom-tree-node span button{
        list-style: none;
        margin:0;
        padding:0 15px;
        font-size: 18px;
        height: 24px;
    }
    .el-tree-node__content{
        display: flex;
        align-items: center;
        height: 26px;
        cursor: pointer;
    }

    .paramcontain{
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
    }

    .sidebutton{
        display: flex;
        margin-bottom: 8px;
        flex-direction: column;
        margin-right: 8px;
    }

    .paramcs{
        width: 600px;
        margin-left: 12px;
    }

    .toprow {
        background-color: #d4dbe3;
    }
    .paramcs .el-row:last-child {
        margin-bottom: 0;
    }
    .paramcs .el-col {
        border-radius: 4px;
    }

    .grid-content {
        border-radius: 4px;
        min-height: 36px;
    }
</style>